<template>
  <div>
    <div class="app-root">
         <div class="head">
        我的订单
        <span class="arrow" @click="Jump_path"></span>
      </div>
 
      <div class="page-order">
        <div class="comp-menu-bar">
          <van-tabs animated @click="onclik">
            <van-tab v-for="item in list" :title="item.name" :key="item.id">
              <div class="order-list">
                <van-swipe-cell v-for="(item) in tlist" :key="item.date">
                         <van-dialog v-model="show" title="是否支付" show-cancel-button @confirm="onconfirm(item)" @cancel="oncancel(item)">
</van-dialog>
                  <a class="order-item" href="javascript:;">
                    <div class="header">
                      <span class="time">{{item.date|date}}</span>
                      <span class="status" @click="gxzt(item)" >{{item.zt | playCountNum}}</span>
                    </div>
                    <div class="item" v-for="ele in item.list" :key="ele.id+ele.color+ele.size">
                      <img
                        :src="ele.imgurl"
                        class="comp-lazy-img visible picture"
                      />
                      <div class="info" >
                        <span class="title"
                          >{{ele.name}}</span
                        >
                      </div>
                    </div>
                    <div class="amount">共{{item.list.length}}件&nbsp;&nbsp;总计¥{{(item.nums).toFixed(2)}}</div>
                  </a>
                  <template #right>
                    <van-button
                    @click="del(item)"
                      square
                      text="删除"
                      type="danger"
                      class="delete-button"
                    />
                  </template>
                </van-swipe-cell>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var dayjs = require("dayjs");
dayjs().format();
export default {
  data() {
    return {
        ddzt:0,
         show: false,
      list: [
        {
          name: "所有",
          id: 0,
        },
        {
          name: "已完成",
          id: 1,
        },
        {
          name: "待支付",
          id: 2,
        },
        {
          name: "已取消",
          id: 3,
        },
      ],
      orderlist:'',
    };
  },
   methods: {
          Jump_path() {
      this.$router.go(-1);
    
    },
    onclik(name,item){
console.log(name,item);
this.ddzt=name
    },
    //修改总订单状态
    gxzt(item){
        if(item.zt==2){
          this.show=true
        }
    },
    //确认按钮
    onconfirm(item){
        item.zt=1
    },
    //取消按钮
    oncancel(item){
        item.zt=3
       
    },
  del(ele){
    // console.log(item);
  this.orderlist=   this.orderlist.filter(item=>{
        return item!=ele
     })
  }
    },
 
    created() {
         //收货订单存储
          if (window.localStorage.getItem("myorderlist") == null) {
      window.localStorage.setItem("myorderlist", "[]");
    }
          let myorderlist = window.localStorage.getItem("myorderlist");
          myorderlist = JSON.parse(myorderlist);
          this.orderlist=myorderlist
          console.log(this.orderlist);
    },
    beforeDestroy() {
         let  myorderlist=this.orderlist
           myorderlist = JSON.stringify(myorderlist);
      window.localStorage.setItem("myorderlist", myorderlist);
    },
    computed:{

tlist(){
    if(this.orderlist.length==0){
        return []
    }
    if(this.ddzt==1){
        return this.orderlist.filter(item=>{
            return item.zt == 1
        })
    }else if(this.ddzt==2){
          return this.orderlist.filter(item=>{
            return item.zt == 2
        })
    }else if(this.ddzt==3){
          return this.orderlist.filter(item=>{
            return item.zt == 3
        })
    }else{
        return this.orderlist
    }
}
        },
         filters:{
            playCountNum(value){
                // console.log(value); 
                if(value == 1){
                    return '已完成'
                }else if(value == 2){
                    return '待支付'
                }else if(value==3){
                    return '订单取消'
                }
            },
//             num(value){            
//    return  value.reduce((total,item)=>{
//         return total += item.coupon_price * item.num; 
//     },0)
//             },
          
                date(value){
                                   var now = dayjs(value).format("YYYY-MM-DD :HH:mm:ss");
                                   return now
                }
        }       
}
</script>
<style scoped>
.head {
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  color: rgb(59, 59, 59);
  z-index: 999;
  background: #fff;
}
.arrow {
  display: block;
  width: 12px;
  height: 23px;
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 999;
  background: url(../../public/assets/images/ic_arrow_home.png);
  transform: rotate(180deg);
}
.app-root {
  background-color: #f5f5f5;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
}
.comp-menu-bar {
  position: relative;
  left: 0;
  top: 50px;
  right: 0;
  height: 44px;
  line-height: 44px;
  font-size: 0;
  color: #595c61;
  /* text-align: center; */
  background-color: #fff;
}
.comp-menu-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  border: solid #e5e5e5;
  border-width: 0 0 0.5px;
}
.page-order .order-list {
  margin-top: 15px;
  overflow: hidden;
}
.page-order .order-list .order-item {
  position: relative;
  display: block;
  margin: 10px 12px;
  background-color: #fff;
}
a {
  text-decoration: none;
}
a,
body {
  color: #595c61;
}
.page-order .order-list .order-item .header {
  position: relative;
  height: 44px;
  line-height: 44px;
  padding: 0 8px;
  font-size: 14px;
  color: #000c18;
}
.page-order .order-list .order-item .header .status {
  position: absolute;
  right: 8px;
  color: #fc7967;
}
.page-order .order-list .order-item .item {
  padding: 8px;
  width: 100%;
  /* background-color: #fbfbfb; */
}
.page-order .order-list .order-item .item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  border: solid #e5e5e5;
  border-width: 0 0 0.5px;
}
.page-order .order-list .order-item .item .picture {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 8px;
}
.page-order .order-list .order-item .item .info {
  display: inline-block;
  position: relative;
  width: calc(100% - 91px);
  height: 80px;
  vertical-align: top;
}
.page-order .order-list .order-item .item .info .title {
  font-size: 14px;
  color: #595c61;
  margin-top: 10px;
text-align: left !important;
  /* overflow: hidden;
  word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; */
}
.page-order .order-list .order-item .amount {
  height: 44px;
  line-height: 44px;
  padding: 0 8px;
  font-size: 14px;
  text-align: right;
  position: relative;
}
.page-order .order-list .order-item .amount:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  border: solid #e5e5e5;
  border-width: 0 0 0.5px;
}
.time {
  position: absolute;
  left: 10px;
}
.delete-button{
    height: 100%;
    background-color:rgb(251, 251, 251);
    /* background-color: #fff; */
    color: red;
    border: none;
}
</style>